<template>
  <div class="body">
    <div class="head">
      <el-button key="primary" type="primary" text style="width: 100px;" @click="esc()">
        <el-icon>
          <Guide />
        </el-icon>返回
      </el-button>
      <h1><a href="#">数码商城可视化系统数据分析</a></h1>
      <div class="time" id="showTime">
        {{ showTime }}
      </div>
    </div>

    <div class="mainbox">
      <ul class="clearfix">
        <li>
          <div class="boxall" style="height: calc(58% - .15rem)">
            <div class="alltitle">
              各类产品销售数量
            </div>
            <div class=" boxnav " id="echarts4">
            </div>
          </div>
          <div class="boxall" style="height: calc(42% - .15rem)">
            <div class="alltitle">
              产品好/坏/中评数量
            </div>
            <div class="boxnav" id="echarts3"></div>
          </div>
        </li>
        <li>
          <div class="boxall" style="height: calc(20% - .15rem)">
            <ul class="row h100 clearfix">
              <li class="col-6">
                <div class="sqzs h100">
                  <p>业绩总览</p>
                  <h1 v-if="data.perList"><span>{{ data.perList[0]?.kpi }}</span>万</h1>
                </div>
              </li>
              <li class="col-6">
                <ul class="row h100 clearfix">
                  <li class="col-4">
                    <div class="tit01">
                      手机
                    </div>
                    <div class="piebox" id="pe01"></div>
                  </li>
                  <li class="col-4">
                    <div class="tit01">
                      电脑
                    </div>
                    <div class="piebox" id="pe02"></div>
                  </li>
                  <li class="col-4">
                    <div class="tit01">
                      其他
                    </div>
                    <div class="piebox" id="pe03"></div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <div class="boxall" style="height: calc(38% - .15rem)">
            <div class="alltitle">
              往年销量对比
            </div>
            <div class="boxnav" id="echarts1"></div>
          </div>
          <div class="boxall" style="height: calc(42% - .15rem)">
            <div class="alltitle">
              用户性别占比分析
            </div>
            <div class="boxnav" id="echarts2"></div>
          </div>
        </li>
        <li>
          <div class="boxall" style="height: calc(33.333% - .15rem)">
            <div class="alltitle">
              往年用户退货对比
            </div>
            <div class="boxnav" id="echarts5"></div>
          </div>
          <div class="boxall" style="height: calc(33.333% - .15rem)">
            <div class="alltitle">
              畅销前四产品
            </div>
            <div class="boxnav" id="">
              <table border="0" cellspacing="0">
                <tbody>
                  <tr>
                    <th>品牌名</th>
                    <th>销量</th>
                    <th>销量占比</th>
                  </tr>
                  <tr v-for="item in data.qianList" :key="item.sn_id">
                    <th>{{ item.c_name }}</th>
                    <td>{{ item.xs_number }}</td>
                    <td>{{ (item.xs_number / item.jh_number * 100).toFixed(0) }}%</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="boxall" style="height: calc(33.333% - .15rem)">
            <div class="alltitle">
              市场产品调研分析
            </div>
            <div class="boxnav" id="echarts6" style="height:calc(100% - .3rem);"></div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script lang='ts' setup>
import { Guide } from '@element-plus/icons-vue'
import { StatisticsSellApi, StatisticsDosApi, StatisticsMarkApi, StatisticsqianApi, StatisticsPerApi, StatisticsRetApi, StatisticsOldsellApi, StatisticsAgeApi } from '../composables/http'
import { useRouter } from "vue-router";
import * as echarts from 'echarts';
import { ref, onMounted, markRaw, onUnmounted, reactive } from "vue"
const router = useRouter()
const data = reactive<{
  sellList: API.sellList[]
  dosList: API.dosList[]
  perList: API.perList[]
  oldsellList: API.oldsellList[]
  AgeList: API.AgeList[]
  RetList: API.RetList[]
  qianList: API.sellList[]
  markList: API.markList[]
  page: {
    pageSize: number
    currentPage: number
    count: number
  }[]
  myChart6: echarts.ECharts
  myChart5: echarts.ECharts
  myChart4: echarts.ECharts
  myChart1: echarts.ECharts
  myChart2: echarts.ECharts
  myChart3: echarts.ECharts
  option1: any
  option2: any
  option3: any
  option4: any
  option5: any
  option6: any
  t: any
  t2: any
}>({
  sellList: [],
  dosList: [],
  perList: [],
  oldsellList: [],
  AgeList: [],
  RetList: [],
  qianList: [],
  markList: [],

  page: [
  ],

  myChart1: (null as any),
  myChart2: (null as any),
  myChart3: (null as any),
  myChart4: (null as any),
  myChart5: (null as any),
  myChart6: (null as any),
  t: null,
  t2: null,
  option4: {
    grid: {
      left: '2%',
      top: '1%',
      right: '5%',
      bottom: '0%',
      containLabel: true
    },
    xAxis: [{
      show: false,
    }],
    yAxis: [{
      axisTick: 'none',
      axisLine: 'none',
      offset: '7',
      axisLabel: {
        color: 'rgba(255,255,255,.6)',
        fontSize: '14',
      },
      data: ""

    }, {
      axisTick: 'none',
      axisLine: 'none',
      axisLabel: {
        color: 'rgba(255,255,255,.6)',
        fontSize: '14',
      },
      data: ""
    }],
    series: [{
      name: '条',
      type: 'bar',
      yAxisIndex: 0,
      data: "",
      label: {
        show: true,
        position: 'right',
        formatter: (param: any) => {
          return param.value + '%';
        },
        color: 'rgba(255,255,255,.8)',
        fontSize: '12',
      },
      barWidth: 15,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
          offset: 0,
          color: '#03c893'
        },
        {
          offset: 1,
          color: '#0091ff'
        }
        ]),
        borderRadius: 15,
      },
      z: 2
    },
    {
      name: '白框',
      type: 'bar',
      yAxisIndex: 1,
      barGap: '-100%',
      data: [99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
      barWidth: 15,
      itemStyle: {
        color: 'rgba(0,0,0,0.2)',
        borderRadius: 15,
      },
      z: 1
    }
    ]
  },
  option1: {
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
    }, "grid": {
      "top": "20%",
      "right": "50",
      "bottom": "20",
      "left": "30",
    },
    legend: {
      data: ['手机', '电脑', '其他', '主产品年销量', '总年销量',],
      right: 'center', width: '100%',
      textStyle: {
        color: "#fff"
      },
      itemWidth: 12,
      itemHeight: 10,
    },

    "xAxis": [
      {
        "type": "category",
        data: ['2016', '2017', '2018', '2019'],
        axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
        axisLabel: {
          color: "rgba(255,255,255,.7)", fontSize: '14',
        },
      },
    ],
    "yAxis": [
      {
        "type": "value",
        "name": "单位万",
        axisTick: { show: false },
        splitLine: {
          show: false,

        },
        "axisLabel": {
          "show": true,
          fontSize: 14,
          color: "rgba(255,255,255,.6)"

        },
        axisLine: {
          min: 0,
          max: 10,
          lineStyle: { color: 'rgba(255,255,255,.1)' }
        },//左线色

      },
      {
        "type": "value",
        "name": "单位万",
        "show": true,
        "axisLabel": {
          "show": true,
          fontSize: 14,
          // formatter: "{value} %",
          color: "rgba(255,255,255,.6)"
        },
        axisTick: { show: false },
        axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//右线色
        splitLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.1)' } },//x轴线
      },
    ],
    "series": [
      {
        "name": "手机",
        "type": "bar",
        "data": [],
        "barWidth": "15%",
        "itemStyle": {
          borderRadius: 15,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#8bd46e'
          }, {
            offset: 1,
            color: '#09bcb7'
          }]),
        },
        "barGap": "0.2"
      },
      {
        "name": "电脑",
        "type": "bar",
        "data": [],
        "barWidth": "15%",
        "itemStyle": {
          borderRadius: 15,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#248ff7'
          }, {
            offset: 1,
            color: '#6851f1'
          }]),
        },
        "barGap": "0.2"
      },
      {
        "name": "其他",
        "type": "bar",
        "data": [],
        "barWidth": "15%",
        "itemStyle": {
          borderRadius: 15,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#fccb05'
          }, {
            offset: 1,
            color: '#f5804d'
          }]),
        },
        "barGap": "0.2"
      },
      {
        "name": "总年销量",
        "type": "line",
        smooth: true,
        "yAxisIndex": 1,
        "data": [],
        lineStyle: {
          width: 2
        },
        "itemStyle": {
          "color": "#86d370",
        },
      }
      ,
      {
        "name": "主产品年销量",
        "type": "line",
        "yAxisIndex": 1,

        "data": [],
        lineStyle: {
          width: 2
        },
        "itemStyle": {
          "color": "#3496f8",
        },
        "smooth": true
      }
    ]
  },
  option2: {
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
    },
    grid: {
      left: '0',
      top: '30',
      right: '10',
      bottom: '3',
      containLabel: true
    },
    legend: {
      data: ['男', '女'],
      right: 'center',
      top: 0,
      textStyle: {
        color: "#fff"
      },
      itemWidth: 12,
      itemHeight: 10,
    },

    xAxis: [{
      data: [],
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        rotate: -90,
        color: "rgba(255,255,255,.6)",
        fontSize: 14,
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }

      },


    }, {

      axisPointer: { show: false },
      axisLine: { show: false },
      position: 'bottom',
      offset: 20,

    }],

    yAxis: [{
      type: 'value',
      axisTick: { show: false },
      // splitNumber: 6,
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      },
      axisLabel: {
        formatter: "{value} %",
        color: "rgba(255,255,255,.6)",
        fontSize: 14,
      },

      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      }
    }],
    series: [
      {
        name: '男',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          color: 'rgba(228, 228, 126, 1)',
          width: 2
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(228, 228, 126, .2)'
          }, {
            offset: 1,
            color: 'rgba(228, 228, 126, 0)'
          }], false),
          shadowColor: 'rgba(0, 0, 0, 0.1)',
        },
        itemStyle: {
          color: 'rgba(228, 228, 126, 1)',
          borderColor: 'rgba(228, 228, 126, .1)',
          borderWidth: 12
        },
        data: []

      }, {
        name: '女',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {

          color: 'rgba(255, 128, 128, 1)',
          width: 2
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(255, 128, 128,.2)'
          }, {
            offset: 1,
            color: 'rgba(255, 128, 128, 0)'
          }], false),
          shadowColor: 'rgba(0, 0, 0, 0.1)',
        },
        itemStyle: {
          color: 'rgba(255, 128, 128, 1)',
          borderColor: 'rgba(255, 128, 128, .1)',
          borderWidth: 12
        },
        data: []
      },
    ]
  },
  option3: {
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      data: ['好评', '中评', '差评'],
      right: 'center',
      top: 0,
      textStyle: {
        color: "#fff"
      },
      itemWidth: 12,
      itemHeight: 10,
      // itemGap: 35
    },
    grid: {
      left: '0',
      right: '20',
      bottom: '0',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: [],
      axisLabel: {
        formatter: function (value: any) { return value.split("").join("\n"); },
        color: "rgba(255,255,255,.6)",
        fontSize: 14,
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0.3)'
        }
      },
    },
    yAxis: {
      type: 'value',
      splitNumber: 4,
      axisTick: { show: false },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.1)'
        }
      },
      axisLabel: {
        color: "rgba(255,255,255,.6)",
        fontSize: 14,
      },
      axisLine: { show: false },
    },

    series: [{
      name: '好评',
      type: 'bar',
      stack: 'a',
      barWidth: '30', barGap: 0,
      itemStyle: {
        color: '#8bd46e',
      },
      data: []
    },
    {
      name: '中评',
      type: 'bar',
      stack: 'a',
      barWidth: '30', barGap: 0,
      itemStyle: {
        color: '#f5804d',
        borderRadius: 0,
      },
      data: []
    },
    {
      name: '差评',
      type: 'bar',
      stack: 'a',
      barWidth: '30', barGap: 0,
      itemStyle: {
        color: '#248ff7',
        borderRadius: 0,
      },
      data: []
    }
    ]
  },
  option5: {
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
    }, "grid": {
      "top": "15%",
      "right": "10%",
      "bottom": "20",
      "left": "10%",
    },
    legend: {
      data: ['退货数量', '退货占比'],
      right: 'center',
      top: 0,
      textStyle: {
        color: "#fff"
      },
      itemWidth: 12,
      itemHeight: 10,
    },
    "xAxis": [
      {
        "type": "category",
        data: [],
        axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
        axisLabel: {
          color: "rgba(255,255,255,.7)", fontSize: '14',
        },

      },
    ],
    "yAxis": [
      {
        "type": "value",
        "name": "单位百",
        splitLine: { show: false },
        axisTick: { show: false },
        "axisLabel": {
          "show": true,
          color: "rgba(255,255,255,.6)"

        },
        axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//左线色

      },
      {
        "type": "value",
        "name": "单位%",
        "show": true,
        axisTick: { show: false },
        "axisLabel": {
          "show": true,
          formatter: "{value} %",
          color: "rgba(255,255,255,.6)"
        },
        axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//右线色
        splitLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.1)' } },//x轴线
      },
    ],
    "series": [

      {
        "name": "退货数量",
        "type": "bar",
        "data": [
        ],
        "barWidth": "20%",

        "itemStyle": {
          borderRadius: 15,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#fccb05'
          }, {
            offset: 1,
            color: '#f5804d'
          }]),
        },
        "barGap": "0"
      },
      {
        "name": "退货占比",
        "type": "line",
        "yAxisIndex": 1,

        "data": [],
        lineStyle: {
          width: 2
        },
        "itemStyle": {
          "color": "#ff3300",
        },
        "smooth": true
      }
    ]
  },
  option6: {
    title: {
      text: '',
      subtext: '总体',
      x: 'center',
      y: '40%',
      textStyle: {
        color: '#fff',
        fontSize: 22,
        lineHeight: 10,
      },
      subtextStyle: {
        color: '#90979c',
        fontSize: 16,
        lineHeight: 10,

      },
    },
    tooltip: {
      trigger: 'item',
      formatter: "{b} : {c} ({d}%)"
    },

    visualMap: {
      show: false,
      min: 500,
      max: 600,
      inRange: {
        //colorLightness: [0, 1]
      }
    },
    series: [{
      name: '访问来源',
      type: 'pie',
      radius: ['50%', '70%'],
      center: ['50%', '50%'],
      color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050'
      data: [{
        "value": 0,
        "name": "满意"
      }, {
        "value": 0,
        "name": "非常满意"
      }, {
        "value": 0,
        "name": "不满意"
      }, {
        "value": 0,
        "name": "非常不满意"
      },
      ].sort(function (a, b) {
        return a.value - b.value
      }),
      roseType: 'radius',

      label: {
        formatter: ['{c|{c}万}', '{b|{b}}'].join('\n'),
        rich: {
          c: {
            color: 'rgb(241,246,104)',
            fontSize: 20,
            fontWeight: 'bold',
            lineHeight: 5
          },
          b: {
            color: 'rgb(98,137,169)',
            fontSize: 14,
            height: 44
          },
        },
      },
      labelLine: {
        lineStyle: {
          color: 'rgb(98,137,169)',
        },
        smooth: 0.2,
        length: 10,
        length2: 20,
      }
    }]
  },
})
const showTime = ref()
const time = () => {
  clearTimeout(data.t);//清除定时器
  const dt = new Date();
  var y = dt.getFullYear();
  var mt = dt.getMonth() + 1;
  var day = dt.getDate();
  var h = dt.getHours();//获取时
  var m = dt.getMinutes();//获取分
  var s = dt.getSeconds();//获取秒
  var t = null;
  showTime.value = y + "/" + Appendzero(mt) + "/" + Appendzero(day) + " " + Appendzero(h) + ":" + Appendzero(m) + ":" + Appendzero(s) + "";
  data.t = setTimeout(time, 1000); //设定定时器，循环运行
}
const time2 = async () => {
  clearTimeout(data.t2);//清除定时器
  for (let index = 0; index < data.page.length; index++) {
    if (data.page[index].currentPage >= data.page[index].count) {
      data.page[index].currentPage = 1
    } else {
      data.page[index].currentPage += 1
    }
    data.page[index].pageSize = 1
  }
  await dataList()
  const x = data.sellList[0].xs_number / data.sellList[0].jh_number * 100
  data.option4.yAxis[0].data.shift()
  data.option4.yAxis[0].data.push(data.sellList[0].c_name)
  data.option4.yAxis[1].data.shift()
  data.option4.yAxis[1].data.push(data.sellList[0].jh_number)
  data.option4.series[0].data.shift()
  data.option4.series[0].data.push(x.toFixed(1) as any)
  data.myChart4.setOption(data.option4, true);


  data.option3.xAxis.data.shift()
  data.option3.xAxis.data.push(data.dosList[0].g_name)
  data.option3.series[0].data.shift()
  data.option3.series[0].data.push(data.dosList[0].hp_grade)
  data.option3.series[1].data.shift()
  data.option3.series[1].data.push(data.dosList[0].zp_grade)
  data.option3.series[2].data.shift()
  data.option3.series[2].data.push(data.dosList[0].cp_grade)
  data.myChart3.setOption(data.option3, true);

  data.option1.xAxis[0].data.shift()
  data.option1.xAxis[0].data.push(data.oldsellList[0].year_number)
  data.option1.series[0].data.shift()
  data.option1.series[0].data.push(data.oldsellList[0].sj_number / 10000)
  data.option1.series[1].data.shift()
  data.option1.series[1].data.push(data.oldsellList[0].dn_number / 10000)
  data.option1.series[2].data.shift()
  data.option1.series[2].data.push(data.oldsellList[0].qt_number / 10000)
  data.option1.series[3].data.shift()
  data.option1.series[3].data.push(data.oldsellList[0].year_kpi / 10000)
  data.option1.series[4].data.shift()
  data.option1.series[4].data.push((data.oldsellList[0].sj_number + data.oldsellList[0].dn_number) / 10000)
  data.myChart1.setOption(data.option1, true);

  data.option2.xAxis[0].data.shift()
  data.option2.xAxis[0].data.push(data.AgeList[0].year_number)
  data.option2.series[0].data.shift()
  data.option2.series[0].data.push(data.AgeList[0].man_number / data.AgeList[0].people_number * 100)
  data.option2.series[1].data.shift()
  data.option2.series[1].data.push(data.AgeList[0].woman_number / data.AgeList[0].people_number * 100)
  data.myChart2.setOption(data.option2, true);

  data.option5.xAxis[0].data.shift()
  data.option5.xAxis[0].data.push(data.RetList[0].year_number)
  data.option5.series[0].data.shift()
  data.option5.series[0].data.push(data.RetList[0].ret_number / 100)
  data.option5.series[1].data.shift()
  data.option5.series[1].data.push(data.RetList[0].th_number)
  data.myChart5.setOption(data.option5, true);

  data.t2 = setTimeout(time2, 5000); //设定定时器，循环运行
}
const Appendzero = (obj: any) => {
  if (obj < 10) return "0" + "" + obj;
  else return obj;
}
const echarts_1 = (x_data: String[] = [], sj_number: number[] = [], dn_number: number[] = [], qt_number: number[] = []) => {
  let all: number[] = [], z_all: number[] = []
  data.oldsellList.forEach(e => {
    x_data.push(e.year_number as any)
    sj_number.push(e.sj_number / 10000)
    dn_number.push(e.dn_number / 10000)
    qt_number.push(e.qt_number / 10000)
    all.push(e.year_kpi / 10000)
    z_all.push(e.sj_number / 10000 + e.dn_number / 10000)
  })
  data.option1.xAxis[0].data = x_data
  data.option1.series[0].data = sj_number
  data.option1.series[1].data = dn_number
  data.option1.series[2].data = qt_number
  data.option1.series[3].data = all
  data.option1.series[4].data = z_all

  data.myChart1 = markRaw(echarts.init(document.getElementById('echarts1')));
  data.myChart1.setOption(data.option1);
  window.addEventListener("resize", myChart4res);
}
const echarts_2 = (x_data: number[] = [], man_number: number[] = [], woman_number: number[] = []) => {
  data.AgeList.forEach(e => {
    x_data.push(e.year_number)
    man_number.push(e.man_number / e.people_number * 100)
    woman_number.push(e.woman_number / e.people_number * 100)
  })
  data.option2.xAxis[0].data = x_data
  data.option2.series[0].data = man_number
  data.option2.series[1].data = woman_number
  // 基于准备好的dom，初始化echarts实例
  data.myChart2 = markRaw(echarts.init(document.getElementById('echarts2')));
  // 使用刚指定的配置项和数据显示图表。
  data.myChart2.setOption(data.option2);
  window.addEventListener("resize", myChart4res);
}
const echarts_3 = (g_name: String[] = [], cp_grade: number[] = [], hp_grade: number[] = [], zp_grade: number[] = []) => {
  data.dosList.forEach(e => {
    g_name.push(e.g_name)
    cp_grade.push(e.cp_grade)
    hp_grade.push(e.hp_grade)
    zp_grade.push(e.zp_grade)
  })
  data.option3.xAxis.data = g_name
  data.option3.series[0].data = hp_grade
  data.option3.series[1].data = zp_grade
  data.option3.series[2].data = cp_grade
  // 基于准备好的dom，初始化echarts实例
  data.myChart3 = markRaw(echarts.init(document.getElementById('echarts3')));
  // 使用刚指定的配置项和数据显示图表。
  data.myChart3.setOption(data.option3);
  window.addEventListener("resize", myChart4res);
}
const echarts_4 = (y_data: String[] = [], c_data: number[] = [], d_data: number[] = []) => {
  data.sellList.forEach(e => {
    y_data.push(e.c_name)
    c_data.push(e.jh_number)
    const x = e.xs_number / e.jh_number * 100
    d_data.push(x.toFixed(1) as any)
  })
  data.option4.yAxis[0].data = y_data
  data.option4.yAxis[1].data = c_data
  data.option4.series[0].data = d_data
  // 基于准备好的dom，初始化echarts实例
  data.myChart4 = markRaw(echarts.init(document.getElementById('echarts4')));
  // 使用刚指定的配置项和数据显示图表。
  data.myChart4.setOption(data.option4);
  window.addEventListener("resize", myChart4res);
}
const echarts_5 = (x_data: number[] = [], th_number: number[] = [], ret_number: number[] = []) => {
  data.RetList.forEach(e => {
    x_data.push(e.year_number)
    th_number.push(e.th_number)
    ret_number.push(e.ret_number / 100)
  })
  data.option5.xAxis[0].data = x_data
  data.option5.series[0].data = ret_number
  data.option5.series[1].data = th_number
  // 基于准备好的dom，初始化echarts实例
  data.myChart5 = markRaw(echarts.init(document.getElementById('echarts5')));
  // 使用刚指定的配置项和数据显示图表。
  data.myChart5.setOption(data.option5);
  window.addEventListener("resize", myChart4res);
}

const echarts_6 = () => {
  data.option6.title.text = data.markList[0].sc_number
  data.option6.series[0].data[0].value = (data.markList[0].yes_number / 10000).toFixed(0)
  data.option6.series[0].data[1].value = (data.markList[0].vyes_number / 10000).toFixed(0)
  data.option6.series[0].data[2].value = (data.markList[0].no_number / 10000).toFixed(0)
  data.option6.series[0].data[3].value = (data.markList[0].vno_number / 10000).toFixed(0)
  // data.option5.series[1].data = th_number
  // 基于准备好的dom，初始化echarts实例
  data.myChart6 = markRaw(echarts.init(document.getElementById('echarts6')));
  // 使用刚指定的配置项和数据显示图表。
  data.myChart6.setOption(data.option6);
  window.addEventListener("resize", myChart4res);
}
const pe01 = () => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('pe01'));
  let txt = data.perList[0].percentage / data.perList[0].kpi * 100
  txt = txt.toFixed(0) as any
  const option = {
    title: {
      text: txt + '%',
      x: 'center',
      y: 'center',
      textStyle: {
        fontWeight: 'normal',
        color: '#fff',
        fontSize: '18'
      }
    },
    color: 'rgba(255,255,255,.3)',

    series: [{
      name: '手机',
      type: 'pie',
      clockWise: true,
      radius: ['65%', '80%'],
      labelLine: {
        show: false
      },
      label: {
        show: false
      },
      emphasis: {
        // scale: false
      },
      data: [{
        value: txt,
        name: '已使用',
        itemStyle: {
          color: '#eaff00',
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        }
      }, {
        name: '未使用',
        value: 100 - txt
      }]
    }]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
const pe02 = () => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('pe02'));
  let txt = data.perList[1].percentage / data.perList[0].kpi * 100
  txt = txt.toFixed(0) as any
  const option = {
    title: {
      text: txt + '%',
      x: 'center',
      y: 'center',
      textStyle: {
        fontWeight: 'normal',
        color: '#fff',
        fontSize: '18'
      }
    },
    color: 'rgba(255,255,255,.3)',

    series: [{
      name: '电脑',
      type: 'pie',
      clockWise: true,
      radius: ['65%', '80%'],
      labelLine: {
        show: false
      },
      label: {
        show: false
      },
      emphasis: {
        scale: false
      },
      data: [{
        value: txt,
        name: '已使用',
        itemStyle: {
          color: '#ea4d4d',
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        }
      }, {
        name: '未使用',
        value: 100 - txt
      }]
    }]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
const pe03 = () => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('pe03'));
  let txt = data.perList[2].percentage / data.perList[0].kpi * 100
  txt = txt.toFixed(0) as any
  const option = {
    title: {
      text: txt + '%',
      x: 'center',
      y: 'center',
      textStyle: {
        fontWeight: 'normal',
        color: '#fff',
        fontSize: '18'
      }
    },
    color: 'rgba(255,255,255,.3)',

    series: [{
      name: '其他',
      type: 'pie',
      clockWise: true,
      radius: ['65%', '80%'],
      labelLine: {
        show: false
      },
      label: {
        show: false
      },
      emphasis: {
        scale: false
      },
      data: [{
        value: txt,
        name: '已使用',
        itemStyle: {
          color: '#395ee6',
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        }
      }, {
        name: '未使用',
        value: 100 - txt
      }
      ]
    }]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
const myChart4res = function () {
  data.myChart4 && data.myChart4.resize();
  data.myChart3 && data.myChart3.resize();
  data.myChart1 && data.myChart1.resize();
  data.myChart2 && data.myChart2.resize();
  data.myChart5 && data.myChart5.resize();
  data.myChart6 && data.myChart6.resize();
}


onMounted(async () => {
  const cc = await page_num()
  for (let index = 0; index < cc.length; index++) {
    if (index == 1 || index == 2 || index == 4) {
      cc[index].pageSize = 6
    } else {
      cc[index].pageSize = 9
    }
  }
  data.page = cc
  await dataList()
  for (let index = 0; index < data.page.length; index++) {
    if (data.page[index].currentPage >= data.page[index].count) {
      data.page[index].currentPage = data.page[index].count
    } else {
      if (index == 1 || index == 2 || index == 4) {
        data.page[index].currentPage = 6
      } else {
        data.page[index].currentPage = 9
      }
    }
  }
  await dataListOne()
  echarts_1()
  echarts_2()
  echarts_3()
  echarts_4()
  echarts_5()
  echarts_6()
  pe01()
  pe02()
  pe03()
  data.t = setTimeout(time, 1000); //设定定时器，循环运行
  data.t2 = setTimeout(time2, 5000); //设定定时器，循环运行
})

onUnmounted(() => {
  clearTimeout(data.t)
  clearTimeout(data.t2)
  window.removeEventListener('resize', myChart4res);
})
const page_num = () => {
  let page: any = []
  for (let index = 0; index < 8; index++) {
    page.push({
      pageSize: 9,
      currentPage: 1,
      count: 0,
    })
  }

  return page
}
const dataListOne = async () => {
  const d3 = await StatisticsPerApi(1, 100)
  data.perList = []
  if (d3.code == 200) {
    data.perList = d3.data
  }

  const d7 = await StatisticsqianApi(1, 100)
  data.qianList = []
  if (d7.code == 200) {
    data.qianList = d7.data
  }

  const d8 = await StatisticsMarkApi(1, 100)
  data.markList = []
  if (d8.code == 200) {
    data.markList = d8.data
  }
  console.log(data.markList);

}
const dataList = async () => {
  const d = await StatisticsSellApi(data.page[0].currentPage, data.page[0].pageSize)
  data.sellList = []
  if (d.code == 200) {
    data.sellList = d.data
    data.page[0].count = d.count as number
  }
  const d2 = await StatisticsDosApi(data.page[1].currentPage, data.page[1].pageSize)
  data.dosList = []
  if (d2.code == 200) {
    data.dosList = d2.data
    data.page[1].count = d2.count as number
  }
  const d4 = await StatisticsOldsellApi(data.page[2].currentPage, data.page[2].pageSize)
  data.oldsellList = []
  if (d4.code == 200) {
    data.oldsellList = d4.data
    data.page[2].count = d4.count as number
  }
  const d5 = await StatisticsAgeApi(data.page[3].currentPage, data.page[3].pageSize)
  data.AgeList = []
  if (d5.code == 200) {
    data.AgeList = d5.data
    data.page[3].count = d5.count as number
  }
  const d6 = await StatisticsRetApi(data.page[4].currentPage, data.page[4].pageSize)
  data.RetList = []
  if (d6.code == 200) {
    data.RetList = d6.data
    data.page[4].count = d6.count as number
  }
}
const esc = () => {
  router.go(-1)
}


</script>
<style lang='scss' scoped>
i {
  margin: 0px;
  padding: 0px;
  text-indent: 0px;
}

li {
  list-style-type: none;
}

.body {
  background: #000d4a url(../assets/images/bg.jpg) center center;
  background-size: cover;
  color: #fff;
  font-size: .1rem;
  height: 100vh;
}

a {
  text-decoration: none;
  color: #399bff;
}

@font-face {
  font-family: electronicFont;
  src: url(../assets/font/DS-DIGIT.TTF)
}

.head {
  height: 1.05rem;
  background: url(../assets/images/head_bg.png) no-repeat center center;
  background-size: 100% 100%;
  position: relative
}

.head h1 {
  color: #fff;
  text-align: center;
  font-size: .4rem;
  line-height: .4rem;
  letter-spacing: -1px;
}

.head h1 img {
  width: 1.5rem;
  display: inline-block;
  vertical-align: middle;
}

.time {
  position: absolute;
  right: .15rem;
  top: 0;
  line-height: .75rem;
  color: rgba(255, 255, 255, .7);
  font-size: .3rem;
  padding-right: .1rem;
  font-family: electronicFont;
}


.mainbox {
  padding: 0 .2rem 0rem .2rem;
  height: calc(100% - 1.05rem)
}

.mainbox>ul {
  margin-left: -.1rem;
  margin-right: -.1rem;
  height: 100%
}

.mainbox>ul>li {
  float: left;
  padding: 0 .1rem;
  height: 100%;
  width: 30%
}

.mainbox>ul>li:nth-child(2) {
  width: 40%
}

.boxall {
  padding: 0 .2rem .2rem .2rem;
  background: rgba(6, 48, 109, .5);
  position: relative;
  margin-bottom: .15rem;
  z-index: 10;
}

.alltitle {
  font-size: .2rem;
  color: #fff;
  line-height: .5rem;
  position: relative;
  padding-left: .15rem
}

.alltitle:before {
  position: absolute;
  height: .2rem;
  width: 4px;
  background: #49bcf7;
  border-radius: 5px;
  content: "";
  left: 0;
  top: 50%;
  margin-top: -.1rem;
}

.boxnav {
  height: calc(100% - .5rem);
}

.row>li {
  float: left;
  height: 100%;
}

.col-6 {
  width: 50%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.33333%;
}

.h100 {
  height: 100%;
}

.tit01 {
  text-align: center;
  color: white;
  font-size: .16rem;
  padding: .3rem 0 .02rem 0;
}

.piebox {
  height: calc(100% - .5rem);
  position: relative;
}

.piebox:before {
  width: .6rem;
  height: .6rem;
  content: "";
  border: 1px solid #49bcf7;
  border-radius: 1rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -.31rem;
  margin-top: -.31rem;
  opacity: .7;
}

.sqzs {
  margin-right: .2rem;
}

.sqzs p {
  padding: .2rem 0 .1rem 0;
  font-size: .22rem;
}

.sqzs h1 {
  height: calc(100% - .65rem);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  color: #fef000;
  font-weight: normal;
  letter-spacing: 2px;
  font-size: .5rem;
  justify-content: center;
  padding-bottom: .05rem;
}

.sqzs h1 span {
  font-size: .8rem;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

table {
  width: 100%;
  text-align: center;
}

table th {
  font-size: .16rem;
  background: rgba(0, 0, 0, .1);
}

table td {
  font-size: .16rem;
  color: rgba(255, 255, 255, .6);
}

table th,
table td {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  padding: .1rem 0;
}
</style>